<template>
	<div v-loading="isLoading" class="best-wrap">
		<div
			v-for="(item, index) in playList"
			:key="index"
			class="item-box"
			:class="itemSizeClass"
			@mouseenter="mouseenter(index)"
		>
			<div class="video-name">第{{ item.sectionNumber }}节课 {{ item.sourceFileName }}</div>
			<polyv-video
				:options="{autoplay: false, volume: 0.5, vid: item.videoVid}"
				@ready="ready($event, index)"
			/>
		</div>
	</div>
</template>

<script>
	import coursewareApi from "@rc/apis/rc/courseware.mjs";
	import PolyvVideo from "@rc/pages/components/polyv-video.vue";
	export default {
		props: {
			// 逗号分隔的资源id集合  必传
			ids: {
				type: String,
				default: ""
			}
		},
		components: {
			PolyvVideo
		},
		data() {
			return {
                isLoading: true,
				controlIndex: 0, // 当前操作的的视频下标
				cachePlayIndex: [], // 缓存的全屏下其他播放器播放中的列表下标
				// 播放对象列表,
				playList: []
			};
		},
		computed: {
			itemSizeClass() {
				if (this.playList.length < 2) {
					return "one";
				} else if (this.playList.length < 3) {
					return "two";
				} else if (this.playList.length < 5) {
					return "four";
				} else if (this.playList.length < 7) {
					return "six";
				} else {
					return "nine";
				}
			}
		},
		methods: {
			// 视频区块的移入事件，主要是为了解决视频全屏时触发了所有播放器的全屏事件，导致无法判断操作的是哪个视频
			mouseenter(index) {
				this.controlIndex = index;
			},
			/**
			 * 视频加载完成事件
			 * @param {any} player 播放器实例
			 * @param {any} index 播放器在列表中的下标
			 */
			ready(player, index) {
				this.playList[index].player = player;
				// 进入全屏事件
				player.on("s2j_onFullScreen", () => {
					// 进入全屏时，暂停其他正在播放的视频
					this.cachePlayIndex = [];
					this.playList.forEach((item, index2) => {
						if (this.controlIndex !== index2 && item.isPlaying) {
							// 因为暂停api会导致暂停事件触发，无法判断是手动暂停还是api暂停，缓存当前播放的下标，用于退出全屏时的恢复
							this.cachePlayIndex.push(index2);
							item.player.j2s_pauseVideo();
						}
					});
				});
				// 退出全屏事件
				player.on("s2j_onNormalScreen", () => {
					// 退出全屏时，恢复其他正在播放的视频
					this.playList.forEach((item, index) => {
						if (this.cachePlayIndex.some((i2) => i2 === index)) {
							item.player.j2s_resumeVideo();
						}
					});
				});
				// 关键事件记录播放状态
				// 开始播放事件(手动恢复播放，自动开始播放时都会触发该事件)
				player.on("s2j_onVideoPlay", () => {
					this.playList[index].isPlaying = true;
				});
				// 暂停播放事件(手动暂停，播放结束时都会触发该事件)
				player.on("s2j_onVideoPause", () => {
					this.playList[index].isPlaying = false;
				});
			}
		},
		created() {
			if (!this.ids) {
				this.$alert("缺少视频资源标识", "提示");
				return;
			}
			const idArr = this.ids.split(",");
			if (idArr.length > 9) {
				this.$alert("最多只能选择9个视频资源", "提示");
				return;
			}
			coursewareApi.queryCoursewareInfoBatch({
				data: {
					resourceIds: idArr
				},
				success: (list) => {
					this.playList = list.map((i) => ({
						...i,
						isPlaying: false, // 是否在播放中
						player: null //该视频的播放器实例
					}));
                    this.isLoading = false;
				}
			});
		}
	};
</script>

<style lang="less" scoped>
	.best-wrap {
		width: 100vw;
		height: 100vh;
		min-width: 600px;
		min-height: 600px;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}

	.item-box {
		position: relative;

		&.one {
			width: 100%;
			height: 100%;
		}

		&.two {
			width: 50%;
			height: 100%;
		}

		&.four {
			width: 50%;
			height: 50%;
		}

		&.six {
			width: 33.3333%;
			height: 50%;
		}

		&.nine {
			width: 33.3333%;
			height: 33.3333%;
		}
	}

	.video-name {
		box-sizing: border-box;
		width: 100%;
		padding: 5px 10px;
		font-size: 15px;
		line-height: 1.2;
		word-break: break-all;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
	}
</style>
